<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <style>
    * {}
  </style>
</head>

<body>
  1. css3 有哪些新特性
  <ul>
    <li>1.颜色 :新增RGBA , HSLA 模式 HSLA 函数 ：定义 HSL 颜色，并设置透明度：</li>
    <li>2.文字阴影 text-shadow</li>
    <li>3.边框 : 圆角 border-radius 边框阴影 box-shadow</li>
    <li>4.盒子模型： box-sizing</li>
    <li>5.背景 background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-clip设置背景图的裁剪区域 以 ，逗号分隔 可以设置多个背景 用于自适应布局
    </li>
    <li>6.渐变 liner-gradient . radial-gradient</li>
    <li>7.过渡 transition 可实现动画</li>
    <li>8. 自定义动画 animate @keyfrom</li>
    <li>9.css3中的唯一的伪元素是 ::selection</li>
    <li>10.媒体查询 多栏布局 @media screen and (width:....)() </li>
    <li>11.border-image 边框图片</li>
    <li>12.2d转换 transform (translate(x,y); rotate(x,y) skew(x,y) ; scale(x,y) </li>
    <li>13.3d转换</li>
    <li>14. 字体图标 font-face</li>
    <li>15.flex </li>
  </ul>
  <hr>
  2.css3 选择器有哪些
  <div>
    1.属性选择器 [href='...']{}
    2.伪类选择器 div:nth-child(3):{}
    3.伪元素选择器 ::after ::before
  </div>
  <hr>
  3. 列举flex布局的属性 并说明用途
  <div>
    <ul>
      <li>1.justify-content 控制子元素纵轴的排序方式 </li>
      <li>2.flex-direction 控制子元素的排序</li>
      <li>flex-wrap 控制子元素换不换行</li>
    </ul>
  </div>
  <hr>
  4、CSS3 的兼容问题怎么处理
  <div>
    <p>遵从优雅降级 和渐进增强</p>
  </div>
  <hr>
  5.CSS3 新增伪类有那些？
  <div>
    <span>我是第一个span</span>
    <span>我是第二个span</span>
    <span>我是第三个span</span>
    <span>我是第四个span</span>
    <span>我是第五个span</span>
    <span>我是第六个span</span>
    <span>我是第七个span</span>
    <p>:enabled :disabled 控制表单控件的禁用状态</p>
    <p>:checked 单选框或复选框被选中</p>
  </div>
  <style>
    span:first-child {
      color: #00ff62;
    }

    span:last-child {
      color: #ff0;
    }

    span:nth-child(2n) {
      color: #f00;
    }
  </style>
  6.使用css 制作轮播图
  <div>
    <p>
      使用css3的 animation 属性去制作
    </p>
  </div>
  <hr>
  7.rem怎么布局
  <div>
    <p> 可以使用百分比 % 浏览器的字体默认大小是 16px 16px*312.5%=50px 就可以给html根元素设置font-size设置 312.5% 再可以通过媒体查询来对不同屏幕的宽度 设置字体不同的大小 </p>
  </div>
  <hr>
  8.利用css制作圆形 椭圆 三角形
  <div id="root">
    <div class="root1"></div>
    <div class="root2"></div>
    <div class="root3"></div>
    <style>
      #root {
        display: flex;
      }

      .root1 {
        width: 20px;
        height: 20px;
        background: #f00;
        border-radius: 50%;

      }

      .root2 {
        width: 30px;
        height: 20px;
        background: #f00;
        border-radius: 50%;
      }

      .root3 {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 20px solid #232323
      }
    </style>
  </div>
  <hr>
  9.html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题
  <div>
    <ol>
      <li>1.拖拽释放(Drag and drop) API ondrop 自定义属性 例如 data-id</li>
      <li>2.语义化标签 header</li>
      <li>3.音频，视频 如果浏览器不支持自动播放 视频静音就行 </li>
      <li>4.画布 canvas 和img 的区别 如果仅显示单个静态图像，则与仅使用img标签没有什么不同</li>
      <li>5.地理(Geolocation) API 可以获得用户的位置</li>
      <li>6.本地存储</li>
      <li>7.临时存储</li>
      <li>8.表单控件 例如 calendar date , time email url sech tel file number</li>
      <li>9.新的技术 webworker websocket Geolocation</li>
      <li>10 文件读取</li>
      <li>移除的元素 big basefont center font s tt u:</li>
      <li>
        支持HTML5新标签
        <p>ie6/7/8可以通过document.createElement 产生的新标签，可以利用这一新特性让这些浏览器去支持HTML5新标签</p>
      </li>
    </ol>
  </div>
  <hr>
  10.html5新增的操作dom方法
  <div>
    <p>
      document.querySelector()
      document.querySelectorAll()
      document.getElementsByClassName()
    </p>

    <script>
      // document.querySelector()
      // document.querySelectorAll()
      // document.getElementsByClassName()

    </script>
  </div>
  <hr>
  11.image 和canvas 在处理图片有什么区别
  <div>
    <p>
      image是通过对象的形式描述图片的，canvas 通过专门的api将图片绘制在画布上

    </p>
  </div>
  <hr>
  12. HTML5 中的本地存储概念是什么？生命周期有多长
  <div>
    <p>
      区别 1.cookie 数据始终在同源的http请求中携带 即cookie在浏览器和服务器之间来回传递 sessionStorage localStorage 不会把数据发给服务器 仅保存在本地
    </p>
    <p>
      2. cookie的数据不能超过4k
    </p>
    <p>
      3.数据有效期也不同 sessionStorage 浏览器关闭即销毁 localStorage 浏览器关闭不销毁 cookie只在设置了过期时间之前一直有效
    </p>
    <p>4.作用域不同 sessionstorage不在不同的浏览器窗口中共享，即使是在同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有的同源窗口中都是共享的。</p>
  </div>
  <hr>
  13.移动端页面开发调试
  <div>
    <p>BrowserSync 页面自动更新</p>
  </div>
  <hr>
  14.什么是 Web Worker？为什么我们需要它
  <div>
    <p>
      Web Worker就是一个运行在后台的JavaScript线程，不会影响页面的响应。
    </p>
  </div>
  <hr>
  15.HTML5 应用程序缓存和浏览器缓存有什么区别
  <div>
    <p>
      应用程序缓存是 HTML5 的重要特性之一，提供了离线使用功能，让应用程序可以获取本地的网站内容，例如 HTML、CSS、图片以及 Javascript。这个特性可以提高网站性能
    </p>
  </div>
  <hr>
</body>

</html>